<html>
<head>
<title>My Radio Station Demo</title>

<style>
table {width: 650px; background: white url(images/tablebg.gif) bottom repeat-x; }
body { background:url(images/bg.jpg); }
th {font-family: verdana; font-weight: bold; font-size: 12px; background:url(images/titlebar.jpg); color: white; height: 22px; }
tr.greybar1 { font-family: verdana; font-size: 12px; color: darkblue; background-color: #F0F1F7; }
tr.greybar2 { font-family: verdana; font-size: 12px; color: darkblue; background-color: #FAFAFA; }
td {height: 24px; border-bottom: 1px dotted #B2B2B2; }
</style>

<script src="jquery-1.2.6.pack.js"></script>

<script>

$(document).ready(function() {

   $('div').css("display", "inline");
   $('tr:even').addClass('greybar1');
   $('tr:odd').addClass('greybar2');
   pollstation();
   setInterval(pollstation, 15000);

});

function pollstation() {

	$.ajax( {
    		url: 'playing.php?id='+Math.random(),
    		type: 'GET',
    		dataType: 'html',
    		success: function(stationdata) {
			var lines = stationdata.split('\n');
			$('#listeners').html(lines[0] + '<br>' + lines[1]);
			$('#currentsong').html(lines[2]);
			for (var i = 1; i <= 5; i++)
				$('#prevsong' + i).html(lines[i + 2]);
    		}
	} );
}

</script>

</head>
<body>


<center>
<table cellspacing=0>

<tr><th>Listeners</th></tr>
<tr><td><div id="listeners"></div></td></tr>
<tr><th>Currently Playing</th></tr>
<tr><td><div id="currentsong"></div></td></tr>
<tr><th>Previous Songs</th></tr>
<tr><td><div id="prevsong1"></div></td></tr>
<tr><td><div id="prevsong2"></div></td></tr>
<tr><td><div id="prevsong3"></div></td></tr>
<tr><td><div id="prevsong4"></div></td></tr>
<tr><td><div id="prevsong5"></div></td></tr>

</table>

</center>

</body>
</html>